Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DevTools: Fix highlight updates Canvas side problem #18973

Merged
merged 1 commit into from
May 21, 2020

Conversation

bvaughn
Copy link
Contributor

@bvaughn bvaughn commented May 21, 2020

Previously we were setting the width/height of the canvas to the screen's available width and height, but the CSS size to the viewport size. This former is generally smaller than the latter, and on some websites (e.g. everycode.store) this caused the drawn dimensions to be compressed and look bad.

The reason this behavior was particularly broken for the site above is because of a CSS rule:
image

So to be fair, an alternate fix would be to override this rule with our inline style.

Resolves #17432

@bvaughn bvaughn requested review from gaearon and lunaruan May 21, 2020 16:19
@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label May 21, 2020
@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a52c851:

Sandbox Source
stoic-architecture-hyft7 Configuration

@sizebot
Copy link

sizebot commented May 21, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against a52c851

@sizebot
Copy link

sizebot commented May 21, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against a52c851

Copy link
Contributor

@marvinhagemeister marvinhagemeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That resolves it for me 🎉

@bvaughn
Copy link
Contributor Author

bvaughn commented May 21, 2020

Thanks for digging in and helping uncover the underlying cause!

@bvaughn bvaughn merged commit c93a6cb into facebook:master May 21, 2020
@bvaughn bvaughn deleted the devtools-trace-canvas-size branch May 21, 2020 17:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Devtools : highlight box is shown too small.
4 participants